import React from 'react';
import { Layout, Menu, Breadcrumb, Avatar, Dropdown, Button, message } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined
} from '@ant-design/icons';
import { withRouter, Link, NavLink } from 'react-router-dom';
import { adminRoutes } from '../../router/index';
import { useTranslation, withTranslation } from 'react-i18next';

import './index.css';
import { navMenu } from './data';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
class Frame extends React.Component {
  constructor(props) {
    super(props);
    // this.loginOut = this.loginOut.bind(this);
  }
  state = {
    collapsed: false,
    // 可动态配置二级导航
    menus: navMenu
  };
  //下拉列表
  dropMenu = (
    <Menu>
      <Menu.Item>
        <Link to="/user/index">返回用户界面</Link>
      </Menu.Item>
      <Menu.Item danger onClick={this.loginOut.bind(this)}>
        退出登录
      </Menu.Item>
    </Menu>
  );
  // 退出登录
  loginOut() {
    this.props.history.push('/');
    message.success('退出成功');
  }

  // 收起侧边栏
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };
  renderSubMenu = item => {
    return (
      <Menu.SubMenu key={item.path} icon={item.icon} title={item.title}>
        {item.children &&
          item.children.map(item => {
            return item.children && item.children.length > 0
              ? this.renderSubMenu(item)
              : this.renderMenuItem(item);
          })}
      </Menu.SubMenu>
    );
  };
  renderMenuItem = item => {
    return (
      <Menu.Item key={item.path} onClick={p => this.props.history.push(p.key)} icon={item.icon}>
        {item.title}
      </Menu.Item>
    );
  };
  renderI18n = item => {
    const { i18n } = this.props;
    return (
      <Button onClick={() => i18n.changeLanguage(i18n.language === 'en' ? 'zh' : 'en')}>
        {i18n.language === 'en' ? '切换成中文' : '切换成英文'}
      </Button>
    );
  };
  render() {
    const { t } = this.props;
    return (
      <Layout id="components-layout-demo-custom-trigger">
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className={this.state.collapsed ? 'test' : 'logo'}></div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {this.state.menus.map(item => {
              return item.children && item.children.length > 0
                ? this.renderSubMenu(item)
                : this.renderMenuItem(item);
            })}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: '0 10',
              fontSize: 24,
              justifyContent: 'space-between',
              display: 'flex'
            }}
          >
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle
            })}
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span>{t('footer.detail')}</span>
              {this.renderI18n()}
              <Dropdown overlay={this.dropMenu}>
                <div>
                  <Avatar
                    size="small"
                    style={{ backgroundColor: '#87d068' }}
                    icon={<UserOutlined />}
                  />
                  <span style={{ fontSize: 16, marginLeft: 8 }} onClick={e => e.preventDefault()}>
                    管理员
                  </span>
                </div>
              </Dropdown>
            </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280
            }}
          >
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default withRouter(withTranslation()(Frame));
